import React from 'react';
import { Progress } from 'antd';
import {
  FormOutlined,
  DeleteOutlined,
} from '@ant-design/icons';

const getColumns = (_context: any) => {
  const columns = [
    {
      title: 'Institution Introduction',
      dataIndex: 'organizationName',
      key: 'organizationName',
      render: (_text: string, row: any) => (
        <div className="avatar-wrap">
          {
            row.organizationLogo
              ? <img src={row.organizationLogo} alt="logo"/>
              : <div className="avatar"></div>
          }

          <div className="avatar-right">
            <div className="title">{row.organizationName}</div>
            <div className="desc">{row.orgnisationIntroduction}</div>
          </div>
        </div>
      ),
    },
    {
      title: 'Institution specialty',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Institution Type',
      dataIndex: 'orgTypeName',
      key: 'orgTypeName',
    },
    {
      title: 'Completed',
      key: 'tags',
      dataIndex: 'tags',
      render: (_text: any, row: any) => (
        <div>
          <div>
            <Progress
              percent={row.age}
              size="small"
              strokeColor={'#fbbf22'}
              // showInfo={false}
            />
            <div className="cor-y text-xs">Reviewing</div>
          </div>

          <Progress percent={row.age} size="small" />
        </div>
      ),
    },
    {
      title: 'Manipulation',
      key: 'action',
      render: (_text: any, _row: any) => (
        <span>
          <a className="mr-4"><FormOutlined /></a>

          <a><DeleteOutlined /></a>
        </span>
      ),
    },
  ];

  return columns;
};

export { getColumns };
